<template>
  <div class="task-config">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="自动审核间隔：" prop="configValue">
          <el-select v-model="ruleForm.configValue" placeholder="请选择">
            <el-option label="6小时" :value="6" />
            <el-option label="12小时" :value="12" />
            <el-option label="18小时" :value="18" />
            <el-option label="24小时" :value="24" />
          </el-select>
          <el-button type="primary" size="mini" :loading="isLoading" @click="buyerRegistration">修改</el-button>
        </el-form-item>
        <el-form-item label="购物标签：" prop="configValue">
          <el-tag
            v-for="(tag, index) in ruleForm.shoppingLabel"
            :key="index"
            closable
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
          <el-button type="primary" size="small" @click="unpdateLabel">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getAutoExamineInterval, updateAutoExamineInterval, getShoppingLabel, updateShoppingLabel } from '@/api/user'
export default {
  data() {
    return {
      ruleForm: {
        configValue: '',
        shoppingLabel: []
      },
      isLoading: false,
      inputVisible: false,
      inputValue: ''
    }
  },
  mounted() {
    this.getAutoExamineInterval()
    this.getShoppingLabel()
  },
  methods: {
    getAutoExamineInterval() {
      this.isLoading = true
      getAutoExamineInterval().then(res => {
        this.ruleForm.configValue = res
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    },
    buyerRegistration() {
      this.isLoading = true
      updateAutoExamineInterval({
        configValue: this.ruleForm.configValue
      }).then(res => {
        this.isLoading = false
        this.$message({
          message: `修改成功！`,
          type: 'success'
        })
      }).catch(() => {
        this.isLoading = false
      })
    },
    getShoppingLabel() {
      this.isLoading = true
      getShoppingLabel().then(res => {
        this.ruleForm.shoppingLabel = res
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.ruleForm.shoppingLabel.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleClose(tag) {
      this.ruleForm.shoppingLabel.splice(this.ruleForm.shoppingLabel.indexOf(tag), 1)
    },
    unpdateLabel() {
      this.isLoading = true
      updateShoppingLabel({
        shoppingLabel: this.ruleForm.shoppingLabel
      }).then(res => {
        this.isLoading = false
        this.$message({
          message: `修改成功！`,
          type: 'success'
        })
      }).catch(() => {
        this.isLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .task-config{
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
</style>
